<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>xeokit visual test</title>
    <link href="css/pageStyle.css" rel="stylesheet" />
  </head>

  <body>
    <canvas id="myCanvas"></canvas>
  </body>

  <script type="module">
    import { Viewer, SceneModel } from "../../dist/xeokit-sdk.min.es.js";
    import { signalTestComplete } from "./lib/utils.js";

    const viewer = new Viewer({
      canvasId: "myCanvas",
      transparent: true,
    });

    viewer.scene.camera.eye = [-3.38, 2.09, 2.67];
    viewer.scene.camera.look = [-0.85, 0.5, 0.79];
    viewer.scene.camera.up = [0.36, 0.89, -0.27];

    const sceneModel = new SceneModel(viewer.scene, {
      id: "table",
      position: [0, 0, 0],
      scale: [1, 1, 1],
      rotation: [0, 0, 0],
      edges: true,
    });

    sceneModel.createMesh({
      id: "redLegMesh",
      primitive: "triangles",
      positionsCompressed: [
        16381, 60484, 16381, 5460, 60484, 16381, 5460, 0, 16381, 16381, 0,
        16381, 16381, 60484, 16381, 16381, 0, 16381, 16381, 0, 5460, 16381,
        60484, 5460, 16381, 60484, 16381, 16381, 60484, 5460, 5460, 60484, 5460,
        5460, 60484, 16381, 5460, 60484, 16381, 5460, 60484, 5460, 5460, 0,
        5460, 5460, 0, 16381, 5460, 0, 5460, 16381, 0, 5460, 16381, 0, 16381,
        5460, 0, 16381, 16381, 0, 5460, 5460, 0, 5460, 5460, 60484, 5460, 16381,
        60484, 5460,
      ],
      positionsDecodeMatrix: [
        0.00003052270125906143, 0, 0, 0, 0, 0.00003052270125906143, 0, 0, 0, 0,
        0.00003052270125906143, 0, -1, -1, -1, 1,
      ],
      indices: [
        0,
        1,
        2,
        0,
        2,
        3, // front
        4,
        5,
        6,
        4,
        6,
        7, // right
        8,
        9,
        10,
        8,
        10,
        11, // top
        12,
        13,
        14,
        12,
        14,
        15, // left
        16,
        17,
        18,
        16,
        18,
        19, // bottom
        20,
        21,
        22,
        20,
        22,
        23,
      ],
      color: [1, 0.3, 0.3],
      metallic: 0.9,
      roughness: 0.2,
    });

    sceneModel.createEntity({
      id: "redLeg",
      meshIds: ["redLegMesh"],
    });

    sceneModel.createMesh({
      id: "greenLegMesh",
      primitive: "triangles",
      positionsCompressed: [
        60064, 60484, 16381, 49143, 60484, 16381, 49143, 0, 16381, 60064, 0,
        16381, 60064, 60484, 16381, 60064, 0, 16381, 60064, 0, 5460, 60064,
        60484, 5460, 60064, 60484, 16381, 60064, 60484, 5460, 49143, 60484,
        5460, 49143, 60484, 16381, 49143, 60484, 16381, 49143, 60484, 5460,
        49143, 0, 5460, 49143, 0, 16381, 49143, 0, 5460, 60064, 0, 5460, 60064,
        0, 16381, 49143, 0, 16381, 60064, 0, 5460, 49143, 0, 5460, 49143, 60484,
        5460, 60064, 60484, 5460,
      ],
      positionsDecodeMatrix: [
        0.00003052270125906143, 0, 0, 0, 0, 0.00003052270125906143, 0, 0, 0, 0,
        0.00003052270125906143, 0, -1, -1, -1, 1,
      ],
      indices: [
        0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12,
        14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23,
      ],
      color: [0.3, 1.0, 0.3],
      metallic: 0.9,
      roughness: 0.2,
    });

    sceneModel.createEntity({
      id: "greenLeg",
      meshIds: ["greenLegMesh"],
    });

    sceneModel.createMesh({
      id: "blueLegMesh",
      positionsCompressed: [
        60064, 60484, 60064, 49143, 60484, 60064, 49143, 0, 60064, 60064, 0,
        60064, 60064, 60484, 60064, 60064, 0, 60064, 60064, 0, 49143, 60064,
        60484, 49143, 60064, 60484, 60064, 60064, 60484, 49143, 49143, 60484,
        49143, 49143, 60484, 60064, 49143, 60484, 60064, 49143, 60484, 49143,
        49143, 0, 49143, 49143, 0, 60064, 49143, 0, 49143, 60064, 0, 49143,
        60064, 0, 60064, 49143, 0, 60064, 60064, 0, 49143, 49143, 0, 49143,
        49143, 60484, 49143, 60064, 60484, 49143,
      ],
      positionsDecodeMatrix: [
        0.00003052270125906143, 0, 0, 0, 0, 0.00003052270125906143, 0, 0, 0, 0,
        0.00003052270125906143, 0, -1, -1, -1, 1,
      ],
      indices: [
        0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12,
        14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23,
      ],
      color: [0.3, 0.3, 1.0],
      metallic: 0.9,
      roughness: 0.2,
    });

    sceneModel.createEntity({
      id: "blueLeg",
      meshIds: ["blueLegMesh"],
    });

    sceneModel.createMesh({
      id: "yellowLegMesh",
      positionsCompressed: [
        16381, 60484, 60064, 5460, 60484, 60064, 5460, 0, 60064, 16381, 0,
        60064, 16381, 60484, 60064, 16381, 0, 60064, 16381, 0, 49143, 16381,
        60484, 49143, 16381, 60484, 60064, 16381, 60484, 49143, 5460, 60484,
        49143, 5460, 60484, 60064, 5460, 60484, 60064, 5460, 60484, 49143, 5460,
        0, 49143, 5460, 0, 60064, 5460, 0, 49143, 16381, 0, 49143, 16381, 0,
        60064, 5460, 0, 60064, 16381, 0, 49143, 5460, 0, 49143, 5460, 60484,
        49143, 16381, 60484, 49143,
      ],
      positionsDecodeMatrix: [
        0.00003052270125906143, 0, 0, 0, 0, 0.00003052270125906143, 0, 0, 0, 0,
        0.00003052270125906143, 0, -1, -1, -1, 1,
      ],
      indices: [
        0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12,
        14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23,
      ],
      color: [1.0, 1.0, 0.0],
      metallic: 0.9,
      roughness: 0.2,
    });

    sceneModel.createEntity({
      id: "yellowLeg",
      meshIds: ["yellowLegMesh"],
    });

    sceneModel.createMesh({
      id: "purpleTableTopMesh",
      positionsCompressed: [
        65525, 65525, 65525, 0, 65525, 65525, 0, 55444, 65525, 65525, 55444,
        65525, 65525, 65525, 65525, 65525, 55444, 65525, 65525, 55444, 0, 65525,
        65525, 0, 65525, 65525, 65525, 65525, 65525, 0, 0, 65525, 0, 0, 65525,
        65525, 0, 65525, 65525, 0, 65525, 0, 0, 55444, 0, 0, 55444, 65525, 0,
        55444, 0, 65525, 55444, 0, 65525, 55444, 65525, 0, 55444, 65525, 65525,
        55444, 0, 0, 55444, 0, 0, 65525, 0, 65525, 65525, 0,
      ],
      positionsDecodeMatrix: [
        0.00003052270125906143, 0, 0, 0, 0, 0.00003052270125906143, 0, 0, 0, 0,
        0.00003052270125906143, 0, -1, -1, -1, 1,
      ],
      indices: [
        0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12,
        14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23,
      ],
      color: [1.0, 0.3, 1.0],
      metallic: 0.9,
      roughness: 0.2,
    });

    sceneModel.createEntity({
      id: "purpleTableTop",
      meshIds: ["purpleTableTopMesh"],
    });

    sceneModel.finalize();

    window.viewer = viewer;
    window.model = sceneModel;

    signalTestComplete(viewer);
  </script>
</html>
